import React from "react";
import { Button, ConfigProvider, Dropdown, Tabs, TabsProps } from "antd";
import zh_CN from 'antd/locale/zh_CN'
import { LogoutOutlined, UserOutlined } from "@ant-design/icons";
import PageBlackList from "./pages/black_list";
import PageWhiteList from "./pages/white_list";
import PageLogList from "./pages/log_list";
import { User } from "f2e-middle-rbac/lib/interface";
import { changeSearch, connect, dispatch, getState } from "./store";

const items: TabsProps['items'] = [
    {
        key: "black_list",
        label: "黑名单管理",
        children: <PageBlackList />,
    },
    {
        key: "white_list",
        label: "白名单管理",
        children: <PageWhiteList />,
    },
    {
        key: "log_list",
        label: "日志管理",
        children: <PageLogList />,
    },
];

interface IAppProps {
    loginUser: User;
    page: string;
}

const _App = (props: IAppProps) => {
    const { loginUser, page } = props;
    const item = items.find((item) => item.key === page) || items[0];

    return (
        <ConfigProvider locale={zh_CN}>
            <div className="px-4">
                <Tabs items={items} activeKey={item.key} onChange={page => changeSearch({ page })} tabBarExtraContent={{
                    right: <Dropdown menu={{
                        items: [
                            {
                                key: "logout",
                                label: "退出登录",
                                icon: <LogoutOutlined />,
                                onClick: () => location.href = "/logout",
                            },
                            {
                                key: "profile",
                                label: "个人中心",
                                icon: <UserOutlined />,
                                onClick: () => location.href = "/admin",
                            },
                        ],
                    }}>
                        <Button type="link" icon={<UserOutlined />}>{loginUser.nickname}</Button>
                    </Dropdown>
                }} />
            </div>
        </ConfigProvider>
    )
}

export default connect(() => {
    const { loginUser, location_search } = getState()
    return {
        loginUser,
        page: location_search.get("page"),
    }
})(_App)
